<template>
  <el-dialog
    class="dia-style"
    :title="title"
    :visible.sync="open"
    v-if="open"
    width="1000px"
    :close-on-click-modal="false"
    @close="cancel">
    <el-form ref="form" :model="formData" label-width="140px" label-position="left" style="padding: 0 10px">
      <!-- 基础信息部分 -->
      <div class="upload-title-box">
        <div class="upload-title">基础信息</div>
        <el-checkbox v-model="showRequired" @change="changeShow">仅展示必填信息 </el-checkbox>
      </div>
      <HkForm
        ref="hkFormRef1"
        :formLabels="basicArr"
        :rules="formRules"
        :data="formData"
        :dict-list="dictList"
        :btn-hidden="true"
        labelWidth="140"
        labelPosition="left">
        <template #filter-orgRegion>
          <el-cascader
            v-model="formData.orgRegion"
            :options="dictList.zoneList"
            :props="casProps"
            :filterable="true"
            @change="handleChange">
          </el-cascader>
        </template>

        <template #filter-orgId>
          <treeselect
            v-model="formData.orgId"
            :options="dictList.orgList"
            :normalizer="normalizer"
            placeholder="选择上级部门" />
        </template>
      </HkForm>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/HKForm'
import Treeselect from '@riophae/vue-treeselect'
import { addUser, update,queryByOrder,detailById} from '@/api/system/user.js'
import AddTable from '@/components/Common/addTable.vue'

export default {
  components: { HkForm, AddTable, Treeselect },
  data() {
    return {
      // 对话框是否显示
      open: false,
      // 仅展示必填信息
      showRequired: false,
      // 折叠菜单展示的数据
      activeNames: ['1', '2', '3', '4', '5'],
      casProps: { expandTrigger: 'hover', value: 'zoneCode', label: 'zoneName', children: 'children' },
      // 表单数据
      formData: {},
      // 基础信息
      basicArr: [
        {
          label: '人员名称',
          field: 'name',
          type: 'input',
          maxlength: 32,
        },
        {
          label: '人员编号',
          field: 'userNo',
          type: 'input',
          maxlength: 20,
        },
        {
          label: '所属部门',
          field: 'orgId',
          type: 'slot',
        },
        {
          label: '涉密等级',
          field: 'secLevel',
          type: 'select',
          list: 'secLevelList',
        },

        {
          label: '在岗类别',
          field: 'nationType',
          type: 'select',
          list: 'nationTypeList',
        },
        {
          label: '人员岗位',
          field: 'post',
          type: 'input',
           hidden: true,
          maxlength: 32,
        },
        {
          label: '人员职务',
          field: 'job',
          type: 'input',
           hidden: true,
          maxlength: 32,
        },
        {
          label: '岗位分类',
          field: 'userBusType',
          type: 'select',
          list: 'userBusTypeList',
        },

        {
          label: '身份证号',
          field: 'nationalIdentification',
          type: 'input',
           hidden: true,
          maxlength: 18,
        },
        {
          label: '性别',
          field: 'sex',
          type: 'select',
          list: 'sys_user_sexList',
           hidden: true,
        },
        {
          label: '政治面貌',
          field: 'politicalClimate',
          type: 'select',
          list: 'politicalClimateList',
           hidden: true,
        },
        {
          label: '民族',
          field: 'nation',
          type: 'select',
          list: 'nationList',
           hidden: true,
        },

        {
          label: '出生日期',
          field: 'birthday',
          type: 'datePicker',
           hidden: true,
           format:'yyyy-MM-dd'
        },
        {
          label: '手机',
          field: 'phone',
          type: 'input',
           hidden: true,
          maxlength: 32,
        },
        {
          label: '座机',
          field: 'mobile',
          type: 'input',
           hidden: true,
          maxlength: 32,
        },
        {
          label: '办公室',
          field: 'room',
          type: 'input',
           hidden: true,
          maxlength: 50,
        },
        {
          label: '邮箱',
          field: 'email',
          type: 'input',
           hidden: true,
          maxlength: 50,
        },
        {
          label: '是否重点关注',
          field: 'attention',
          type: 'select',
          list: 'equipmentLocalizedList',
           hidden: true,
        },

        {
          label: '机构排序',
          field: 'orders',
          type: 'number',
           hidden: true,
        },
        {
          label: '备注',
          field: 'remark',
          type: 'textarea',
           hidden: true,
          maxlength: 255,
          attrs: {
            rows: '8',
          },
          span: 24,
        },
      ],
      // 表单校验
      formRules: {
        userNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        orgName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        userBusType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        secLevel: [{ required: true, message: '不能为空', trigger: 'blur' }],
        nationType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        orgId: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // nationalIdentification:[{pattern:  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请填写正确的身份证格式',trigger: 'blur'}],
        // email:[{pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, message: '请填写正确的邮箱',trigger: 'blur'}],
        // phone:[{pattern: /^1[34578]\d{9}$/, message: '请填写正确的电话',trigger: 'blur'}],
        // mobile:[{pattern:/^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/, message: '请填写正确的座机号',trigger: 'blur'}],
      },

      // 表格展示的数据
      tableData: [],
      // 表格列表的结构
      tableList: [
        { label: 'IP地址', param: 'equipmentUserId', type: 'input' },
        { label: 'MAC', param: 'equipmentOrgId', type: 'input' },
      ],
    }
  },
  props: {
    // 标题
    title: {
      type: String,
      default: '',
    },
    total: {
      type: Number,
      default: 0
    },
    treeId: {
      type: String,
      default: '',
    },
    dictList: {
      type: Object,
      default: () => {},
    },
  },
  computed: {},
  methods: {
    handleChange(data) {},
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children,
      }
    },
    // 是否只展示必填项
    changeShow() {
      this.basicArr.forEach((item) => {
        if (typeof item.hidden == 'boolean') {
          item.hidden = this.showRequired
        }
      })
    },
    // 清空表单
    resetFields() {
      this.$refs['form'].resetFields()
      this.$refs['hkFormRef1']?.resetForm('formLabels')
    },
    show(id) {
      if (!id) {
        this.formData = {}
      }
      this.$set(this.formData, 'orders', this.total+1)
      queryByOrder(id).then((res) => {
        let size = res

        this.$set(this.formData, 'userNo', size)
        this.$set(this.formData, 'userBusType', '1')
      })
      this.showRequired = true
      this.changeShow()
      if (this.treeId) {
        this.formData.orgId = this.treeId
      }
      return new Promise((resolve, reject) => {
        if (id) {
          detailById(id).then((res) => {
            this.formData = res
        
            if (this.formData.parentId == 0) {
              this.basicArr.forEach((item) => {
                if (item.field == 'parentId') {
                  item.hidden = true
                }
              })
            } else {
              this.basicArr.forEach((item) => {
                if (item.field == 'parentId') {
                  item.hidden = false
                }
              })
            }
          })
        }
        resolve(this.formData)
      }).then((res) => {
        this.open = true
      })
    },
    // 提交事件
    async submitForm() {
      //  let res = await this.$refs.add_table.submitTable();

      let res = await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      if (this.title == '添加') {
        addUser(this.formData).then((res) => {
          this.$message.success('新增成功')
          this.open = false
          this.$emit('handleAdd')
        })
      } else {
        update(this.formData).then((res) => {
          this.$message.success('修改成功')
          this.open = false
          this.$emit('handleAdd')
        })
      }
    },
    // 关闭按钮
    cancel() {
      this.formData = {}
      this.open = false
    },
  },

  mounted() {},
  watch: {},
}
</script>

<style lang="scss" scoped>
.upload-title-box {
  height: 60px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);

  .upload-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
}

::v-deep {
  .el-collapse-item {
    border-bottom: 1px solid #e6ebf5;

    .el-collapse-item__wrap {
      border-bottom: none;
    }

    .el-collapse-item__content {
      padding-bottom: 0px;
    }
  }

  .iRow {
    margin: 0 !important;
  }

  .el-dialog__body {
    display: flex;
    flex-direction: column;
    max-height: 500px;
  }

  .el-collapse {
    border-top: none;

    .el-collapse-item__header {
      height: 60px;
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      margin-left: 30px;
      border-bottom: none;
    }

    .el-collapse-item__arrow {
      margin: 0 auto 0 10px;
      margin-left: -90px;
    }
  }
}

::v-deep .el-cascader {
  width: 100%;
}
</style>
